<template>
    <div class="index">
      <zh-card title="">
        <zh-form ref="apiQueryForm" :row-flag="false" :model="state.queryParam">
          <zh-form-item :span="12" prop="funcType" label="功能类型">
            <el-radio-group v-model="state.queryParam.funcType" size="large">
              <div>
                <el-radio style="margin-left:20px" label="" >全部</el-radio>
              </div>
              <div v-for="item in state.dictData.funcType" >
                <el-radio style="margin-left:20px"  :label="item.dictKey" >{{item.dictValue}}</el-radio>
              </div>
            </el-radio-group>
          </zh-form-item>
          <zh-form-item :span="12" prop="funcSourceType" label="功能来源类型">
            <el-radio-group  v-model="state.queryParam.funcSourceType" size="large">
              <div>
                <el-radio style="margin-left:20px" label="" >全部</el-radio>
              </div>
              <div v-for="item in state.dictData.funcSourceType">
                <el-radio style="margin-left:20px"  :label="item.dictKey" >{{item.dictValue}}</el-radio>
              </div>
            </el-radio-group>
          </zh-form-item>
          <zh-form-item :span="12" prop="apiType" label="接口类型">
            <el-radio-group  v-model="state.queryParam.apiType" size="large">
              <div>
                <el-radio style="margin-left:20px" label="" >全部</el-radio>
              </div>
              <div v-for="item in state.dictData.apiType">
                <el-radio style="margin-left:20px"  :label="item.dictKey" >{{item.dictValue}}</el-radio>
              </div>
            </el-radio-group>
          </zh-form-item>
          <zh-form-item v-if="state.advanced" :span="12" prop="operating" label="操作期">
            <el-radio-group  v-model="state.queryParam.operating" size="large">
              <div>
                <el-radio style="margin-left:20px" label="" >全部</el-radio>
              </div>
              <div v-for="item in state.dictData.operating">
                <el-radio style="margin-left:20px"  :label="item.dictKey" >{{item.dictValue}}</el-radio>
              </div>
            </el-radio-group>
          </zh-form-item>
          <zh-form-item v-if="state.advanced" :span="12" prop="httpMethod" label="调用方式">
            <el-radio-group  v-model="state.queryParam.httpMethod" size="large">
              <div>
                <el-radio style="margin-left:20px" label="" >全部</el-radio>
              </div>
              <div v-for="item in state.dictData.httpMethod">
                <el-radio style="margin-left:20px"  :label="item.dictKey" >{{item.dictValue}}</el-radio>
              </div>
            </el-radio-group>
          </zh-form-item>
          <zh-form-item v-if="state.advanced" :span="12" prop="contentType" label="请求类型">
            <el-radio-group  v-model="state.queryParam.contentType" size="large">
              <div>
                <el-radio style="margin-left:20px" label="" >全部</el-radio>
              </div>
              <div v-for="item in state.dictData.httpContentType">
                <el-radio style="margin-left:20px"  :label="item.dictKey" >{{item.dictValue}}</el-radio>
              </div>
            </el-radio-group>
          </zh-form-item>
          <zh-form-item :span="24" prop="searchText" label="搜索">
            <div>
              <zh-input style="display: inline;"  v-model="state.queryParam.searchText"></zh-input>
              <zh-form-query style="display: inline;margin-left:20px" v-model="state.advanced" :form-ref="apiQueryForm" @queryClick="queryApi"></zh-form-query>
            </div>
          </zh-form-item>
        </zh-form>
      </zh-card>
      <zh-card :title="'数据接口'+total+'项'">
        <el-scrollbar height="400px">
          <div v-for="item in state.apiList" >
            <el-descriptions
                class="margin-top"
                :title="item.funcTitle"
                :column="4"
            >
              <template #extra>
                <el-button @click="apiDetail(item)">查看详情</el-button>
                <el-button @click="apiCarAdd(item)">加入购物车</el-button>
                <el-button type="primary" @click="apply(item)">立即申请</el-button>
              </template>
              <el-descriptions-item label="功能编号">{{ item.funcCode }}</el-descriptions-item>
              <el-descriptions-item label="功能类型">{{ item.funcTypeName }}</el-descriptions-item>
              <el-descriptions-item label="功能来源类型">
                <el-tag size="small">{{ item.funcSourceTypeName }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="调用方式">
                {{ item.httpMethod }}
              </el-descriptions-item>
              <el-descriptions-item label="共享条件">
                <el-tag v-if="item.auditFlag=='1'" type="warning" size="small">受限共享</el-tag>
                <el-tag v-if="item.auditFlag!='1'" size="small">无条件共享</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="调用量">
                {{ item.visits }}
              </el-descriptions-item>
              <el-descriptions-item :span="2" label="功能描述">{{ item.funcDesc }}</el-descriptions-item>
            </el-descriptions>
            <el-divider />
          </div>
        </el-scrollbar>
        <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :disabled="disabled"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="queryApi"
            @current-change="queryApi"
            style="margin:10px;float:right"
        />
      </zh-card>
      <el-dialog
          ref="dialog"
          v-model="state.dialogVisible"
          title="接口信息"
          width="80%"
      >
        <api-info ref="apiInfoPage" :display-flag="true"></api-info>
      </el-dialog>
      <zh-dialog
          ref="consumerDialog"
          v-model="state.consumerVisible"
          title="接口申请信息"
          width="30%"
          @confirm="saveConsumer"
      >
        <consumer-info ref="consumerInfoPage" :displayFlag="false"/>
      </zh-dialog>
    </div>
</template>

<script lang="ts" setup name="apiHallIndex">
//-----------------定义组件--------------
import ApiInfo from '@/views/apiCenter/ApiManager/component/ApiInfo.vue';
import ConsumerInfo from '@/views/apiCenter/ApiConsumer/component/ConsumerInfo.vue';

const apiQueryForm = ref<any>({});
const apiTable = ref<any>({});
//分页参数定义
const currentPage4 = ref(0)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(0)
const apiInfoPage = ref();
const consumerInfoPage=ref();

const state = reactive({
  //查询条件
  queryParam: {} as any,
  dictData: {},
  advanced:false,
  apiList:[],
  //接口信息弹窗
  dialogVisible: false,
  //接口申请弹窗
  consumerVisible:false,
});




//---------------------初始化---------------------
onMounted(()=>{
  const params = {
    dictFields: 'funcType,funcSourceType,apiType,operating,httpMethod,httpContentType',
  };
  $api.common.getBatchDict.post(params).then((res) => {
    state.dictData = res.result;
  });

  queryApi();
})
//---------------------自定义方法----------------------
function queryApi(){
  const params = state.queryParam;
  params.currentPage=currentPage4.value;
  params.pageNum=currentPage4.value;
  params.pageSize=pageSize4.value;
  if (escape(params.searchText).indexOf( "%u" )<0){
    params.funcCode=params.searchText;
    params.funcTitle='';
  }else{
    params.funcCode='';
    params.funcTitle=params.searchText;
  }
  params.otherAccessFlag='1';

  $api.common.send.post('function0001', params).then((res) => {
    total.value=parseInt(res.result.total);
    state.apiList=res.result.list;
  }).catch(() => {});

}

function apiDetail(item){
  state.dialogVisible=true;
  nextTick(()=>{
    apiInfoPage.value.initInfo(item.funcId,true);

  })
}
function apiCarAdd(item){
  //调用接口添加接口到接口购物车
  let params={}
  params.funcId=item.funcId;
  params.funcCode=item.funcCode;
  params.funcTitle=item.funcTitle;
  params.appId=item.appId;
  $api.common.send.post('APICAR0004', params).then(() => {
    $messageBox.success('添加成功', '提示');
  }).catch(() => {});
}

function apply(row){
  state.consumerVisible=true;
  nextTick(()=>{
    let consumerInfo={
      funcId:row.funcId,
      funcCode:row.funcCode,
      funcTitle:row.funcTitle,
    }
    consumerInfoPage.value.setInitDate(consumerInfo);
  })
}

function saveConsumer(){
  consumerInfoPage.value.saveConsumerInfo();
  state.consumerVisible=false;
}
</script>
